<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
</head>
<body class="body">
	
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="#">凯盛项目管理系统</a>
			</div>
		</div>
	</div>
	
	
	<div class="container">
	  <div class="row">
	  <div class="span3">
			<div style="padding: 8px 0;" class="well">
				<ul class="nav nav-list">
				  <li class="nav-header">新Apple总部项目</li>
				  <li class="divider"></li>
				  <li><a href="#"><i class="icon-home"></i>最新动态</a></li>
				  <li>
					<a href="#"><i class="icon-flag"></i>目标</a>
				  </li>
				  <li><a href="#"><i class="icon-folder-open"></i>资料库</a></li>
				  <li><a href="#"><i class="icon-file"></i>文件共享</a></li>
				  <li class="active"><a href="#"><i class="icon-white icon-user"></i>联系人</a></li>
				  <li><a href="#"><i class="icon-fire"></i>想法</a></li>
				  <li><a href="#"><i class="icon-warning-sign"></i>Bug</a></li>
				  <li><a href="#"><i class="icon-cog"></i>项目设置</a></li>
				</ul>
			</div>
		</div>
		<div class="span9">
			<form class="form-horizontal" autocomplete="off" id="contactForm" action="new_contact.jspx" method="post" enctype="application/x-www-form-urlencoded">
        <fieldset>
          <legend>添加新联系人</legend>
          <div class="control-group">
            <label class="control-label" for="input01">姓名</label>
            <div class="controls">
              <input type="text" name="username" class="span5" id="username" x-webkit-speech="undefined">
              <span id="erro1" style="background-color:#eee;padding:5px 5px 5px;color:#DFAD10;display:none">姓名不能为空</span>
            </div>
          </div>
		   <div class="control-group">
            <label class="control-label" for="input01">公司</label>
            <div class="controls">
              <input type="text" name="company" class="span5" id="company" x-webkit-speech="undefined">
			  <span id="erro2" style="background-color:#eee;padding:5px 5px 5px;color:#DFAD10;display:none">公司名称不能为空</span>            
            </div>
          </div>
		  <div class="line"></div>
		   <div class="control-group">
            <label class="control-label" for="input01">手机</label>
            <div class="controls">
              <input type="text" name="mobile" class="span5" id="mobile" x-webkit-speech="undefined">
              <span id="erro3" style="background-color:#eee;padding:5px 5px 5px;color:#DFAD10;display:none">手机号不能为空</span>
            	<span id="erro7" style="background-color:#eee;padding:5px 5px 5px;color:#DFAD10;display:none">手机号码格式错误</span>
            </div>
          </div>
		   <div class="control-group">
            <label class="control-label" for="input01">固话</label>
            <div class="controls">
              <input type="text" name="tel" class="span5" id="tel" x-webkit-speech="undefined">
            <span id="erro4" style="background-color:#eee;padding:5px 5px 5px;color:#DFAD10;display:none">固话不能为空</span>
            <span id="erro8" style="background-color:#eee;padding:5px 5px 5px;color:#DFAD10;display:none">固话格式不正确</span>
            </div>
          </div>
		  <div class="control-group">
            <label class="control-label" for="input01">邮箱</label>
            <div class="controls">
              <input type="text" name="mail" class="span5" id="mail" x-webkit-speech="undefined">
            <span id="erro5" style="background-color:#eee;padding:5px 5px 5px;color:#DFAD10;display:none">邮箱不能为空</span>
            </div>
          </div>
		   <div class="line"></div>
		  <div class="control-group">
            <label class="control-label" for="input01">地址</label>
            <div class="controls">
              <input type="text" name="address" class="span5" id="address" x-webkit-speech="undefined">
            <span id="erro6" style="background-color:#eee;padding:5px 5px 5px;color:#DFAD10;display:none">地址不能为空</span>
            </div>
          </div>
		   <div class="line"></div>
		   <div class="control-group">
            <label class="control-label" for="input01">主页</label>
            <div class="controls">
              <input type="text" name="homePage" class="span5" id="homePage" value="">
			  <p class="help-block">http://www.xxx.com</p>
            </div>
          </div>
		   <div class="control-group">
            <label class="control-label" for="input01">微博</label>
            <div class="controls">
				<select class="span2" id="blog" name="blog">
					<option></option>
					<option>新浪微博</option>
					<option>腾讯微博</option>
					<option>Twitter</option>
				</select>
				<div class="input-prepend">
					<span class="add-on">@</span><input name="blogName" class="span2" id="prependedInput" size="16" type="text" x-webkit-speech="undefined">
                </div>
				
            </div>
          </div>
		   <div class="control-group">
            <label class="control-label" for="input01">简介</label>
            <div class="controls">
              <textarea class="span5" id="abstract" name="abstract" rows="6"></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button type="button" id="btn" class="btn btn-primary">保存</button>
            <a class="btn" onclick="history.back()">返回</a>
          </div>
        </fieldset>
      </form>          
          	
		</div>
		<div class="span3">
			
		</div>
	  </div>
	</div>
	<script type="text/javascript" src="../js/jquery.js"></script>
	
	<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				var num=/\D/g;
				if(num.test($("#mobile").val())){
					$("#erro7").show();
					$("#erro8").focus();
					return;
				}
				if(num.test($("#tel").val())){
					$("#erro8").show();
					$("#erro8").focus();
					return;
				}
				$("#username").focus(function(){
					$("#erro1").hide();
				});
				$("#company").focus(function(){
					$("#erro2").hide();
				});
				$("#mobile").focus(function(){
					$("#erro3").hide();
				});
				$("#tel").focus(function(){
					$("#erro4").hide();
				});
				$("#mail").focus(function(){
					$("#erro5").hide();
				});
				$("#address").focus(function(){
					$("#erro6").hide();
				});
				
				if(!$("#username").val()){
					$("#erro1").show();
					return;
				}else if(!$("#company").val()){
					$("#erro2").show();
					return;
				}else if(!$("#mobile").val()){
					$("#erro3").show();
					return;
				}else if(!$("#tel").val()){
					$("#erro4").show();
					return;
				}else if(!$("#mail").val()){
					$("#erro5").show();
					return;
				}else if(!$("#address").val()){
					$("#erro6").show();
					return;
				}else {
					$("#contactForm").submit();
				}
				
			});
		});
	</script>
</body>
</html>